import React, { Component } from 'react'
import { Button, Checkbox,  } from 'antd';


export default class index extends Component {
  constructor(props) {
    super(props)

    this.state = {
      checkedList: props.arr,
      indeterminate: false,
      checkAll: true,
    }
  }

  render() {
    return (
      <div>
        <div>
          <Checkbox
            indeterminate={this.state.indeterminate}
            onChange={(e) => {
              this.setState({
                checkedList: e.target.checked ? this.props.arr : [],
                indeterminate: false,
                checkAll: e.target.checked,
              });
            }}
            checked={this.state.checkAll}
          >
            全选
          </Checkbox>
        </div>
        <Checkbox.Group
          options={this.props.arr}
          value={this.state.checkedList.map(item => item.value)}
          onChange={(checkedList) => {
            this.setState({
              checkedList: this.props.arr.filter(item => checkedList.some(sitem => sitem == item.value)),
              indeterminate: !!checkedList.length && checkedList.length < this.props.arr.length,
              checkAll: checkedList.length === this.props.arr.length,
            });
          }}
        />
        <div style={{ height: 1, border: "1px solid #f0f0f0", margin: "8px 0" }}></div>
        <div style={{ textAlign: "right" }}>
          <Button type="primary" onClick={() => {
            this.props.Submit(this.state.checkedList)
          }}>确定</Button>
        </div>
      </div>
    )
  }
}
